<template>
	<view class="animation-fade">
		<uni-nav-bar :fixed="true" @clickLeft="handleBack" title="卖书给岛上有家书店" leftIcon="back" :statusBar="true"></uni-nav-bar>

		<view class="box ">
			<!-- content -->
			<view class="cu-list menu menu-avatar goods-list">
				<view class="animation-fade" style="pointer-events: auto;">

					<!-- <my-bookList  @toDetail="toDetail" @onDelete="onDelete" :totPrice.sync="totPrice" :totCount.sync="totCount" :saleBooks.sync="saleBooks" :allChoosed.sync="allChoosed"></my-bookList> -->
					<view class="cu-card no-card">
						<view @click="handleToDetail(index)" class="shadow solids-bottom cu-item cf content padding-right-sm" v-for="(item,index) in saleBooks"
						 :key="item.img">

							<!-- 左边 -->
							<view class="fl flex " style="width: fit-content;">
								<!-- 复选按钮 -->
								<view class="cu-form-group " style="width: 80rpx;" @click.stop="">
									<checkbox-group @change="handleChange(index)">

										<checkbox class='round yellow' :class="item.checked?'checked':''" :checked="item.checked" :value="index"></checkbox>
									</checkbox-group>
								</view>

								<!-- 书本图片 -->
								<view class="image padding">
									<image style="width: 130rpx;height: 200rpx;" :src="item.img"></image>
								</view>

							</view>

							<!-- 右边 -->
							<view class="">
								<!-- 右边的上面 -->
								<view style="height: 170rpx;" class=" margin-top flex justify-between ">
									<view>
										<view class="text-black" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;">
											<text>{{item.bookName}}</text>
										</view>
										<view class="text-gray text-sm">{{item.author}}</view>
									</view>

									<text @click.stop="deleteItem(index)" class="margin-right-sm text-grey text-lg cuIcon-close "></text>
								</view>
								
								<!-- 右边的下面 -->
								<view class="flex  padding-left-sm">
									<view style="" class=" flex justify-between  align-center" @click.stop="">	
										<view class="text-price margin-right text-black text-lg">{{item.price}}</view>
										<view class="padding-bottom-sm ">	
											<uni-number-box :min="1" :max="10" @change="bindChange(index,$event)" class="" :value="item.bookNum"></uni-number-box>
										</view>
										<view class="margin-left-sm cu-tag radius line-mauve ">{{item.discount.toFixed(1)}} 折</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="solids-bottom text-black" style="pointer-events: auto;overflow-y: scroll;">
					<uni-list>
						<uni-list-item title="了解卖书详情"></uni-list-item>
					</uni-list>
				</view>
			</view>

			<!-- 没有东西 -->
			<view class=" canui-kong" v-if="saleBooks.length==0">
			    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
			        <text class="cuIcon-cart text-white"></text>
			    </view>
					 
			    <view class="text-lg  flex justify-center align-center">
			        <text class="text-grey">此处空空如也~</text>
			    </view>
			</view>
		
			<!-- </movable-area> -->
			<!-- foot -->
			<view class="myfoot">
				<view class="" style="height:450rpx;"></view>

				<view class="">
					<!-- <view class="bg-blue" style="height:550rpx; width: 100%;"></view> -->
					<view style="z-index: 9; " class="foot flex cu-bar flex-direction bg-white solids">
						<view class="">
							<view class="cu-bar btn-group padding-sm  flex flex-direction">
								<view class="">
									<button @click="handleScan" class="cu-btn bg-yellow shadow-blur round lg button-hover text-white">
										<text class="cuIcon-scan lg margin-right-sm"></text>
										扫码卖书</button>
									<button @click="show()" class=" cu-btn bg-white shadow shadow-lg round lg button-hover text-black">
										<text class="cuIcon-write lg margin-right-sm"></text>
										手动输入

									</button>
								</view>
							</view>

							<view class="margin-bottom search padding-right-xl padding-left-xl" v-if="show_input">
								<view class="search-form round text-grey text-xs text-left">

									<input maxlength="13" type="number" @input="handleInput" style="width: 450rpx;" class="padding-left" placeholder="请手动输入ISBN"
									 placeholder-class="text-sm text-grey"></input>
									<button @click="handleSearch" class=" cu-btn round solids" style="background-color: #E7E7E7;margin: 0;">
										<text class="cuIcon-search"></text>
									</button>
								</view>
							</view>



						</view>


						<view class="">
							<view style="width: 100vw;" class="flex  cu-bar padding-left padding-right  padding-top-sm text-center bg-gray">
								<view class="flex-twice ">
									<view class="flex  align-center">
										<checkbox-group>

											<checkbox class="yellow round margin-right-sm" :checked="allChoosed" @click="chooseAll" :disabled="flag"></checkbox>
										</checkbox-group>
										<view class="text-black text-lg">
											已选
											<text>{{totCount}}</text>
										</view>
										<view class="text-grey text-lg margin-left-sm margin-right-sm">
											最高可卖
										</view>
										<view class="text-price text-xxl text-blue ">
											{{totPrice}}
										</view>

									</view>

									<view class="flex text-grey align-center padding-left-xs  padding-bottom-sm">
									    <view class=" flex  ">
									        <text class="margin-right-sm  ">预估价格区间 </text>
									        <text class="text-price">{{(totPrice*0.6).toFixed(2)}}~</text>
									        <text class="text-price">{{totPrice.toFixed(2)}}</text>
									    </view>
									    <button class=" cu-btn cuIcon-info text-bold" @click="open()"></button>
									         
									</view>

								</view>
								<view class=" ">
									<button id="nextBtn" @click="handleNext" class="cu-btn bg-yellow text-white lg radius">下一步</button>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			

			<!-- 弹出的图片模态框 -->
			<uni-popup style="z-index: 10;" ref="showImg" type="center" :maskClick="false">
				<view class="flex justify-center align-center flex-direction">
					<image @click="handlePreview" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/Hdbdc7a4fb0ea4e1695c9b337831420a0t.jpg"></image>
					<image style="width: 500rpx; margin-top: -80rpx;" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/H3211821cefde45fca6963587773deec0c.jpg"></image>
				</view>
				<view class="flex justify-center">

					<button @click="hideModal" style="width: 280rpx; margin-top: -50rpx;" class="lg cu-btn bg-yellow text-white text-center round">我知道了</button>
				</view>
			</uni-popup>
			
			<!-- 选择自提弹出的图片模态框 -->
			
			<uni-popup style="z-index: 10;" ref="showImg_self" type="center" :maskClick="false">
				<view class="flex justify-center align-center flex-direction">
					<image @click="handlePreview" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/Hdbdc7a4fb0ea4e1695c9b337831420a0t.jpg"></image>
					<!-- <image style="width: 500rpx; margin-top: -80rpx;" mode="widthFix" class="image" src="https://ae01.alicdn.com/kf/H3211821cefde45fca6963587773deec0c.jpg"></image> -->
				</view>
				<view class="flex justify-center">
			
					<button @click="backToIndex" style="width: 280rpx; " class="lg cu-btn bg-yellow text-white text-center round">我知道了</button>
				</view>
			</uni-popup>


			<!-- 弹出的文字模态框 -->

			<uni-popup style="z-index: 10;" class="" ref="popup" type="bottom">
				<view class="cu-dialog flex align-center">

					<view class="text-left padding-sm text-sm text-content" style="text-indent: 2em;">
						岛上有家书店在收书时会进行品相审核，这一步会把书籍的品相分为品相良好、品相中等、品相不合格，
						其中品相中等的收购价会比品相良好地低30%左右，品相不合格的书按照纸张价（称重）计算。

					</view>
				</view>
			</uni-popup>


		</view>
	</view>


</template>

<script>
	import {
		handleRequest
	} from '../../request/handleRequest.js';
	
	import {mapState,mapMutations} from 'vuex';
	var _self;
	export default {
		computed:mapState(['hasLogin']),
		data() {
			return {
				hidden: true,
				changeDirection: "right",
				// float_x: 750,
				// float_y: 300,
				// old_x: 750,
				// old_y: 300,
				input: "",

				isReady: false,

				show_input: false,

				saleBooks: [],

				totPrice: 0,
				
				booksNum: 0,
				totCount: 0,
				allChoosed: true,
				flag:false
			}
		},


		onLoad(options) {
			_self = this;
			this.saleBooks = uni.getStorageSync("cart") || [];
			
		},
		onShow() {
			// 取出缓存中的cart,并设置全选的值，计算选中书籍数量和总价
			this.saleBooks = uni.getStorageSync("cart") || [];
			// this.allChoosed=this.saleBooks.length?this.saleBooks.every(v=>v.checked):false;
			this.setCart(this.saleBooks);
		},
		methods: {
			...mapMutations(['forceLogin']),
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			bindChange(index,e){
				this.saleBooks[index].bookNum=e,
				this.setCart(this.saleBooks)
			},
			// 跳转到详情页面
			handleToDetail(e) {
				this.booksNum = this.saleBooks[e].booksElement;
				console.log(this.booksNum);
				uni.navigateTo({
					url: "../book_details/book_details?book_index=" + this.booksNum
				});
			},
			
			// 删除书籍
			deleteItem(e) {
				// console.log(e);	
				uni.showModal({
					cancelColor: 'red',
					confirmColor: "#4CD964",
					title: "确认",
					content: '是否确定删除该记录？',
					success(res) {
						if (res.confirm) {
							_self.saleBooks.splice(e, 1);
							_self.setCart(_self.saleBooks);
							// uni.setStorageSync("cart",_self.saleBooks);
						}
					}
				})
			},

			// 复选框
			handleChange(index) {
				// console.log(index);
				this.saleBooks[index].checked = !this.saleBooks[index].checked;
				this.setCart(this.saleBooks);

			},
			// 设置购物车状态同时重新计算底部的选中数目,总价,全选，最后重新存回缓存
			setCart(saleBooks) {
				// this.allChoosed=this.saleBooks.length?this.saleBooks.every(v=>v.checked):false;
				let choosed = true;
				let sum = 0;
				let count = 0;
				saleBooks.forEach(v => {
					if (v.checked) {
						sum += v.price*v.bookNum;
						count+=Number(v.bookNum);
					} else {
						choosed = false;
					}
				})
				// 如果salebooks为空的话就不会循环
				choosed = saleBooks != 0 ? choosed : false;
				this.totPrice = sum;
				this.totCount = count;
				this.allChoosed = choosed;
				this.flag=saleBooks.length==0?true:false;
				uni.setStorageSync("cart", this.saleBooks);
			},

			// 全选
			chooseAll(e) {
				console.log(e);
				this.allChoosed = !this.allChoosed;
				this.saleBooks.forEach(v => v.checked = this.allChoosed);

				this.setCart(this.saleBooks);
			},

			// 大图预览
			handlePreview() {
				uni.previewImage({
					urls: new Array("https://ae01.alicdn.com/kf/Hdbdc7a4fb0ea4e1695c9b337831420a0t.jpg")
				})
			},


			// 处理输入框内容,并发起请求
			handleInput(e) {
				this.input = e.detail.value;
				// console.log(_self.input);
			},

			handleSearch() {
				if(this.hasLogin){
					if (this.input.length > 0) {
						handleRequest(this.input).then(function() {
							// console.log(response);
							// this.$set(this.$data,'saleBooks',uni.getStorageSync("cart"));
							_self.saleBooks = uni.getStorageSync("cart"),
								_self.setCart(_self.saleBooks);
							// console.log(_self.saleBooks);	
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '输入内容不能为空',
							mask: true,
							showCancel: false
						});
					};
				}else{
					uni.reLaunch({
						url:'../login/login',
						success: () => {
							_self.forceLogin(true);
						}
						
					})
				}
				

			},


			hideModal() {
				this.$refs["showImg"].close();
				this.$refs["showImg_self"].close();
			},

			// 显示底部!的提示
			open() {
				this.$refs.popup.open()
			},

			// 按钮下一步
			handleNext() {
				uni.showModal({
					title:'注意',
					content:'本店营业时间为9:00~22:00',
					showCancel:false,
					success: () => {
						this.$refs["showImg"].open();
						// if (this.totCount < 6) {
						// 	this.$refs["showImg"].open();
						// } else {
						// 	uni.showModal({
								
						// 		content:'请您选择收书方式',
						// 		cancelText:'自提',
						// 		confirmText:'上门',
						// 		success: (res) => {
						// 			if(res.confirm){
						// 				uni.navigateTo({
						// 					url: "../submit/submit"
						// 				});
						// 			}else{
						// 				this.$refs['showImg_self'].open();
						// 			}
									
						// 		}
						// 	})
							
						// }
					}
				});
				
			},


			// 处理扫码
			handleScan() {
				
				
				if(this.hasLogin){
					uni.scanCode({
						onlyFromCamera: true,
						scanType: ['barCode'],
						success: (result) => {
							// console.log(result.result);					
							handleRequest(result.result).then(function() {
								// console.log(response);
								// this.$set(this.$data,'saleBooks',uni.getStorageSync("cart"));
								_self.saleBooks = uni.getStorageSync("cart"),
									_self.setCart(_self.saleBooks);
								// console.log(_self.saleBooks);	
							});
					
					
					
						}
					});
				}else{
					uni.reLaunch({
						url:'../login/login',
						success: () => {
							_self.forceLogin(true);
						}
					})
				}
				
				
			},

			// 回到首页
			backToIndex() {
				uni.redirectTo({
					url: "../index/index"
				})
			},
			// 关于悬浮按钮的一些设置
			// reset() {
			// 	// console.log("我被松开了");
			// 	// console.log(this.changeDirection);

			// 	this.float_x = this.old_x;
			// 	this.float_y = this.old_y;
			// 	setTimeout(function() {
			// 		if (this.changeDirection == 'left') {
			// 			this.float_x = 0;
			// 			// console.log(this.float_x);
			// 		} else {
			// 			this.float_x = 750;
			// 		}
			// 	}, 500);
			// 	var _self = this;
			// 	if (this.changeDirection == 'left') {
			// 		setTimeout(function() {
			// 			// this.float_x = 0;
			// 			_self.$set(_self.$data, "float_x", 0);
			// 		}, 1);
			// 	} else {
			// 		setTimeout(function() {
			// 			// this.float_x = 750;
			// 			_self.$set(_self.$data, "float_x", 750);
			// 		}, 1);
			// 	}

			// },
			// onChange: function(e) {
			// 	// console.log(e);
			// 	this.old_x = e.detail.x;
			// 	this.old_y = e.detail.y;

			// 	// this.float_x = e.detail.x;
			// 	// this.float_y = e.detail.y;

			// 	const {
			// 		windowWidth
			// 	} = uni.getSystemInfoSync();
			// 	uni.createSelectorQuery().select("#floatBtn").boundingClientRect((res) => {
			// 		// this.old_y = res.top;
			// 		// this.old_x = e.detail.x;
			// 		if (res.right > windowWidth / 2) {
			// 			// console.log("我在右边");
			// 			// this.float_x = 750;
			// 			this.changeDirection = "right";

			// 		} else {
			// 			// console.log("我在左边");
			// 			// this.float_x = 0;
			// 			this.changeDirection = "left";


			// 		}

			// 		// console.log(res);
			// 	}).exec();
			// },
			// 显示输入框
			show() {
				this.show_input = !this.show_input;
			},


		}
	}
</script>


<style>
	.movable-area {
		/* position:fixed; */
		/* top:0;
	  left:0;
	  width:750rpx;
	  height:100%;
	  pointer-events: none; */
	}

	.movable-view {

		/* position: relative; */

		/* pointer-events: auto; // 重设为auto,覆盖父属性设置
		width: 100rpx;
		height: 100rpx;
		background-color: #b3b6b5;
		border-radius: 50%;
		position: fixed;
		z-index: 10; */

		/* display: inline-block; */

		/* font-size: 60rpx;
		color: #444444; */
	}

	page {

		/* padding-top: 125rpx; */
		/* padding-bottom:100rpx; */
	}

	

	.box {
		position: absolute;
		width: 100%;
	}

	.canui-kong {
		padding-top: 200rpx;
	}

	.canui-kong-icon {
		width: 220rpx;
		height: 220rpx;
		/* line-height: 220rpx; */
		margin: 0 auto;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}

	.canui-kong-icon text {
		font-size: 115rpx;
	}

	.canui-kong .bg-gradual-green {
		margin: 0 auto;
	}

	.cu-list.menu-avatar>.cu-item {
		padding-left: 220rpx;
	}

	/* .goods-list .cu-item .action-checkbox{
	    left:30rpx;
	    position:absolute;
	} */
	/* .cu-list.menu-avatar>.cu-item>.cu-avatar{
	    left:100rpx;
	}
	.goods-list .cu-item .goods-price-btn{
	    position:relative;
	} */

	/* .goods-list .cu-item .action-btn-sum{
	    position:absolute;
	    right:0px;
	    top:0px;
	    text-align:right;
	    border:1px solid #D9D9D9;
	    border-radius:2px;
	}
	.goods-list .cu-item .cu-btn{
	    float:left;
	    width:24px;
	    height:24px;
	    line-height:24px;
	    border-radius:0px;
	    font-size:18px;
	    padding:0px;
	    background-color: #F7F6F6;
	} */
	/* .goods-list .cu-item .ca-sum{
	    float:left;
	    width:32px;
	    height:300px;
	    text-align:center;
	    font-size:12px;
	    line-height:24px;
	    background-color: #fbfbfb;
	    border-left:1px solid #D9D9D9;
	    border-right:1px solid #D9D9D9;
	    min-height:24px;
	}
	.canui-foor-fixed{
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    min-height:85rpx;
	}
	.canui-checked{
	    width:75rpx;
	}
	.canui-delete{
	    width:100rpx;
	}
	.canui-delete .cu-btn{
	    background-color:#fff;
	    font-size:35rpx;
	}
	.canui-price{
	    width:400rpx;
	    text-align:right;
	    align-self:stretch;
	    line-height:85rpx;
	    padding-right:20px;
	    font-size:13px;
	}
	.canui-submit{
	    width:200rpx;
	    align-self:stretch;
	    align-items:center;
	    display:flex;
	    text-align:center;
	    justify-content:center;
	    font-size:13px;
	} */
</style>
